<template>
  <ul>
    <li v-for="(item, index) in o.arr" :key="item.id" @click="handleDel(index)">{{ item.name }}</li>
  </ul>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    // #1 渲染列表
    const o = reactive({
      arr: [
        {
          id: 0,
          name: 'ifer',
        },
        {
          id: 1,
          name: 'elser',
        },
        {
          id: 2,
          name: 'xxx',
        },
      ],
    })
    // #2 删除功能
    const handleDel = (index) => {
      // 注意一定不要忘记使用 reactive 包装对象，否则对数据的操作不是响应式的
      o.arr.splice(index, 1)
    }
    return {
      o,
      handleDel,
    }
  },
}
</script>
